<template>
	<!-- 歌单列表 -->
	<view class="SongList">

		<Transition enter-active-class="animate__animated animate__fadeIn">
			<view class="SongListUl" v-show="songList.length!=0">
				<view v-for="item in songList" :key="item.dissid" @click="toSongListDetail(item.dissid)">
					<view>
						<image :src="item.imgurl" mode="aspectFill"></image>
						<view> <span style="font-size: 1em;" class="iconfont icon-bofang"></span>
							{{(item.listennum/10000).toFixed(1)}}万
						</view>
					</view>
					<view>
						{{item.dissname}}
					</view>
				</view>
			</view>
		</Transition>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		watch,
		computed
	} from "vue";
	import {
		GetSongLists
	} from "@/utils/MusicAPI.js"
	import {
		toSongListDetail
	} from "@/utils/Redirect.js"
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	const props = defineProps(["categoryId"])
	const categoryId = computed(() => {
		return props.categoryId
	})
	watch(categoryId, () => {
		songList.value = []
		page.value = 1
		getSongLists(props.categoryId, page.value, 24)
	})
	// 存放歌单列表
	const songList = ref([])
	const page = ref(1)
	const MaxPage = ref(1)
	onReachBottom(() => {
		if (page.value < MaxPage.value) {
			page.value += 1
			getSongLists(props.categoryId, page.value, 12)
		} else {
			uni.showToast({
				icon: "none",
				title: "已经被榨干了 (★ ω ★)",
			});
		}
	})
	// 获取歌单列表
	const getSongLists = (categoryId, page, limit) => {
		uni.showLoading({
			title: "正在加载"
		})
		GetSongLists(categoryId, page, limit).then(res => {
			console.log(res)
			songList.value.push(...res.data.response.data.list)
			MaxPage.value = res.data.response.data.sum / limit
			setTimeout(function() {
				uni.hideLoading();
			}, 1000);
		}).catch(err => {
			console.log("获取歌单列表错误", err)
		})
	}
	getSongLists(props.categoryId, page.value, 24)
</script>

<style scoped>
	.SongList {
		padding: 10rpx;
		padding-bottom: 110rpx;
	}


	image {
		width: 100%;
		height: 100%;
	}

	.SongListUl {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		justify-content: space-around;
	}

	.SongListUl>view>view:nth-child(1) {
		aspect-ratio: 1/1;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		background-color: rgba(64, 64, 88, 0.6);
	}

	.SongListUl>view>view:nth-child(1)>view {
		position: absolute;
		bottom: 0;
		padding: 1% 5%;
		border-radius: 50px;
		background-color: rgba(27, 27, 37, 0.6);
		font-size: 0.7em;
	}

	.SongListUl>view>view:nth-child(2) {
		overflow: hidden;
		font-size: 0.8em;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>